<template>
    <el-row>
        <el-col :span="5">
            <div class="grid-content bg-purple-dark">&emsp;</div>
        </el-col>
        <el-col :span="14">
            &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp;
            <div class="grid-content bg-purple-dark">
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                <el-descriptions class="margin-top" title="基本信息" :column="3" size="medium" border>
                    <el-descriptions-item>   
                                           
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            合同编号
                        </template>
                        {{ RepayInfo.contractId }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            产品名称
                        </template>
                        {{ RepayInfo.productName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            产品年利率
                        </template>
                        {{ RepayInfo.productRate }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            应还本金
                        </template>
                        {{ RepayInfo.repayShould }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-coin"></i>
                            还款总期数
                        </template>
                        {{ RepayInfo.repayNum }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-present"></i>
                            还款方式
                        </template>
                        {{ RepayInfo.repayMethodName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-wallet"></i>
                            已还本金
                        </template>
                        {{ RepayInfo.repayAlready }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-present"></i>
                            还款进度
                        </template>
                        <el-progress :percentage="RepayInfo.percentage" status="success"></el-progress>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp;
            <template>
                <el-table :data="list" type=index border style="width: 100%">
                    <el-table-column prop="repayCurrentPeriod" label="当前期数">
                    </el-table-column>
                    <el-table-column prop="currentPrincipalPayable" label="应还本金">
                    </el-table-column>
                    <el-table-column prop="currentInterestPayable" label="应还利息">
                    </el-table-column>
                    <el-table-column prop="currentTotalMoney" label="应总总额">
                    </el-table-column>
                    <el-table-column prop="overdueTime" label="截至日期">
                    </el-table-column>
                    <el-table-column prop="currentNowTime" label="实际还款日期">
                    </el-table-column>
                    <el-table-column prop="repayRecordStatus" :formatter="showStatus" label="订单状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                @click="loadRepayDialogInfo(scope.row.repayReocrdId)">还款</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- ----------分页表单--------- -->
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                &emsp;&emsp;&emsp;&emsp;
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="repayRecordDto.currentPage" :page-sizes="page.pageSizes"
                    :page-size="repayRecordDto.pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination>
                <!------------ 还款dialog ---------->
                <el-dialog title="还款信息" :visible.sync="dialog.FormVisible" width="40%">
                    <el-form :model="repayDialogInfo" size="mini" label-width="120px" class="el el-align-left">
                        <el-form-item label="当前还款期数 :">
                            <span class="left">{{ repayDialogInfo.repayCurrentPeriod }}</span>
                        </el-form-item>
                        <el-form-item label="当前应还本金 :">
                            <span class="left">{{ repayDialogInfo.currentPrincipalPayable }}</span>
                        </el-form-item>
                        <el-form-item label="当前应还利息 :">
                            <span class="left">{{ repayDialogInfo.currentInterestPayable }}</span>
                        </el-form-item>
                        <el-form-item label="当前还款总金额 :">
                            <span class="left">{{ repayDialogInfo.currentTotalMoney }}</span>
                        </el-form-item>
                        <el-form-item label="还款方式 :">
                            <el-radio-group v-model="checked">
                                <el-radio border v-for="item in payTypeList" :key="item.payTypeId"
                                    :label="item.payTypeName" size="mini" display="block"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialog.FormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="feeback">确认还款
                        </el-button>
                    </div>
                </el-dialog>
            </template>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple-dark">&emsp;</div>
        </el-col>
    </el-row>
</template>

<script>
import { EventBus } from "../../router/event-bus.js";
export default {
    data() {
        return {
            checked: "",//选中的还款方式
            RepayInfo: {
                contractId: 1,
                productName: "",
                productRate: 1,
                repayMethodName: "",
                repayNum: 1,
                repayAlready: 1,
                repayShould: 1,
                percentage: 1,
            },
            payTypeList: [],//支付方式
            list: [],//接收前端下半个页面显示的还款信息列表
            repayDialogInfo: [],//还款dialog后端信息
            repayRecordDto: {//传给后端的值
                contractId: 1,
                currentPage: 1,
                pageSize: 6,
            },
            payDto: {   //还款界面传给后端的值
                repayReocrdId: 1,
                payTypeId: 1,
            },
            page: {
                pageSizes: [6, 12],
                total: 0
            },
            dialog: {
                FormVisible: false,
            },
        };
    },
    methods: {
        open1() {
            this.$notify({
                title: '提示',
                message: '支付完成后请刷新本页面',
                duration: 0,
                type: 'success'
            });
        },
        //确认还款调用的方法
        feeback() {
            for (let i = 0; i < this.payTypeList.length; i++) {
                if (this.checked == this.payTypeList[i].payTypeName) {
                    this.payDto.payTypeId = this.payTypeList[i].payTypeId;
                }
            };
            //调用支付方法
            if (this.payDto.payTypeId == 2) {
                window.open("http://localhost:8080/alipay/pay?repayReocrdId=" + this.payDto.repayReocrdId + "&payTypeId=" + this.payDto.payTypeId);
            } else {
                this.$axios.post("/repayRecord/paySuccess", this.payDto)
                // .then((res)=>{
                //     if(res.data.code==200){
                //         this.loadRepayInfo();
                //     }
                // })
            }
            this.dialog.FormVisible = false;
            this.loadRepayInfo();
            this.open1();
        },
        //加载整个页面还款信息方法
        loadRepayInfo() {
            this.$axios.post("/repayRecord/queryAll", this.repayRecordDto).then((res) => {
                if (res.data.code == 200) {
                    this.RepayInfo = res.data.data.RepayInfo;
                    this.RepayInfo.productRate = this.RepayInfo.productRate * 100 + "%"; //给利率加百分号
                    this.list = res.data.data.list;
                    this.page.total = res.data.data.total;
                    this.RepayInfo.percentage = (this.RepayInfo.repayAlready / this.RepayInfo.repayShould) * 100;
                } else {
                    this.$message.error("操作错误");
                }
            });
        },
        //打开模态框的调用的方法
        loadRepayDialogInfo(repayReocrdId) {
            for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].repayReocrdId == repayReocrdId) {
                    if (this.list[i].repayRecordStatus == 1) {
                        this.$message.success("该订单已按时完成还款")
                    } else if (this.list[i].repayRecordStatus == 3) {
                        this.$message.error("请前往逾期界面还款")
                    } else {
                        this.dialog.FormVisible = true;
                        this.payDto.repayReocrdId = repayReocrdId;
                        this.$axios.post("/repayRecord/repayInfo", this.payDto).then((res) => {
                            if (res.data.code == 200) {
                                this.repayDialogInfo = res.data.data.repayRecord;
                                this.payTypeList = res.data.data.payTypeList;
                            } else {
                                this.$message.error("操作错误");
                            }
                        });
                    }
                }
            }
        },
        //显示status状态中文
        showStatus(row, column, cellValue, index) {
            if (cellValue == 1) {
                return "按时完成";
            } else if (cellValue == 2) {
                return "待支付";
            } else {
                return "已逾期";
            }
        },
        handleSizeChange(val) {//当每页数据改变时
            this.repayRecordDto.pageSize = val;
            this.loadRepayInfo();

        },
        handleCurrentChange(val) {//当点击页码时
            this.repayRecordDto.currentPage = val;
            this.loadRepayInfo();
        },
    },
    mounted() {
        this.repayRecordDto.contractId=this.$route.params.id;
        alert(this.repayRecordDto.contractId+21111);
        this.loadRepayInfo();
        // this.$route.query.contractId;
    },
};
</script>
<style>
.left {
    float: left;
}
</style>